<template>
  <div id="forumpage"
       :style="{background: 'url('+bgimgBtn+')',backgroundRepeat: 'no-repeat',backgroundSize: '100% 100%'}">
    <div class="forum">
      <forumheader></forumheader>
      <div class="rourmCenter">
        <div class="rourmCenter-centent">
          <div class="nexttitle">
            <el-page-header @back="goBack" :content="title"></el-page-header>
          </div>
          <div class="centent-commont">
            <div class="centent-commont-bottom">
              <p class="centent-commont-bottom-title">
                <span>全部{{tabline==1?'评论':'点赞'}}({{page.total}})</span>
                <span class="tabline">
                  <span :class="tabline==1?'activecommnt':''" @click="tabChange(1)">评论</span>
                  <span :class="tabline==2?'activecommnt':''" @click="tabChange(2)">点赞</span>
                </span>
              </p>
              <div class="centent-commont-body" v-if="arryList.length">
                <div v-for="(item,index) in arryList">
                  <div class="centent-commont-list" v-if="tabline==1">
                    <img src="@/assets/imageAdmin/logo.jpg" alt="" class="centent-commont-list-userimg" v-if="pageOption.type==1">
                    <div class="centent-commont-list-right">
                      <div class="centent-commont-name">
                        <span class="centent-commont-nameuser" v-if="pageOption.type==1">{{item.user?item.user.realname:'匿名'}}</span>
                        <p class="centent-commont-name-article">
                          {{pageOption.type==1?'评论了你的文章':'评论了文章'}}
                          <span class="articlename" @click="commentDetail(item.postings.id)">《{{item.postings.title}}》</span>
                        </p>
                        <span class="centent-commont-time">{{item.create_time}}</span>
                      </div>
                      <p class="centent-commont-word">{{item.content}}</p>
                    </div>
                  </div>
                  <div class="centent-commont-list" v-if="tabline==2">
                    <img src="@/assets/imageAdmin/logo.jpg" alt="" class="centent-commont-list-userimg" v-if="pageOption.type==1">
                    <div class="centent-commont-list-right laudlist">
                      <div class="centent-commont-name">
                        <span class="centent-commont-nameuser" v-if="pageOption.type==1">{{item.user?item.user.realname:'匿名'}}</span>
                        <p class="centent-commont-name-article">
                          {{pageOption.type==1?'点赞了你的文章':'点赞了文章'}}
                          <span class="articlename"  @click="commentDetail(item.postings.id)">《{{item.postings.title}}》</span>
                        </p>
                        <span class="centent-commont-time">{{item.create_time}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <el-col :span="24" style="text-align: center">
                  <el-pagination
                          background
                          layout="prev, pager, next"
                          :total="page.total"
                          :page-size="page.pagesize"
                          @current-change="handleSizeChange">
                  </el-pagination>
                </el-col>
              </div>
              <div class="centent-commont-body" v-else>
                暂无数据
              </div>
            </div>
          </div>
        </div>
        <!--<div class="rourmCenter-right">-->
          <!--&lt;!&ndash;<modulelist></modulelist>&ndash;&gt;-->
          <!--<modulecate></modulecate>-->
        <!--</div>-->
      </div>
    </div>
  </div>
</template>

<script>
  import bgimgBtn from '@/assets/imageAdmin/bgforue.png'
  import modulecate from '@/components/forum/modulecate'
  import modulelist from '@/components/forum/modulelist'
  import forumheader from '@/components/forum/headerforum'
  import '@/assets/scss/forum.scss'
  import {pagination} from '@/utils/util.js'
  import {mapGetters} from "vuex";

  export default {
    components: {
      modulecate,
      modulelist,
      forumheader
    },
    data () {
      return {
        bgimgBtn: bgimgBtn,
        tabline: 1,
        pageOption: this.$route.query,
        title: '',
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        arryList: []
      }
    },
    computed: {
      ...mapGetters(['userInfo']),
    },
    created () {
      let title = '我的消息'
      if (Number(this.pageOption.type) === 2) {
        title = '我的评论'
        this.tabline = this.pageOption.tab
      }
      this.title = title
      this.InitFn()
    },
    methods: {
      InitFn () {
        // type 1我的消息 2我的评论
        // 我的消息  postings_user  用户id; 我的评论 user_id  用户id
        // forum_laud_index
        let data = {p: this.page.pageindex}
        let url_ = this.api.forum_comment_index
        console.log('d:', this.pageOption.type, this.pageOption)
        if (Number(this.pageOption.type) === 1) {
          data.postings_user = this.userInfo.id
        } else {
          data.user_id = this.userInfo.id
        }
        if (this.tabline === 2) {
          url_ = this.api.forum_laud_index
        }
        this.$fetch(url_, data).then((response) => {
          if (response.code === 0) {
            this.arryList = response.list.data
            this.page.total = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 分页
      handleSizeChange (val) {
        this.page.pageindex = val
        this.InitFn()
      },
      tabChange (option) {
        this.arryList = []
        this.tabline = option
        this.page.pageindex = 1
        this.InitFn()
      },
      goBack () {
        this.$router.go(-1)
      },
      commentDetail (id) {
        // this.$router.push('/forumdetail')
        this.$router.push('/forumdetail?type=1&id=' + id)
      }
    },
    mounted () {
    }
  }
</script>


